<template>
  <div
    class="pr scrollbar"
    style="
      width: 24vw;
      height: 100%;
      display: inline-block;
      padding: 0 10px;
      white-space: nowrap;
    "
  >
    <div
      class="pa fss"
      style="
        z-index: 10;
        flex-direction: row-reverse;
        width: calc(100% - 10px);
        padding-right: 10px;
      "
    >
      <timerRange v-model="flag" :kvs="kvs" ref="timerRange" />
    </div>
    <div
      class="scrollbar"
      style="
        width: 100%;
        height: calc(100% - 45px);
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 40px;
        padding: 0 10px;
      "
      @click="handleClick($event)"
    >
      <!-- <vue-seamless-scroll
        ref="seamless"
        :data="list"
        :class-option="seamlessScrollOption"
        style="
          width: 100%;
          height: 100%;
          max-width: 100%;
          min-width:100%;
        "
      > -->
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        :data-obj="JSON.stringify(item)"
      >
        <!-- @click="openItem(item)" -->
        <div class="col1">
          {{ item.Name }}
        </div>
        <div class="col2" ref="UseHourseText">{{ item.UseHourseText }}</div>
        <div class="col3" ref="ApplyCount">&emsp;{{ item.ApplyCount }}</div>
      </div>
      <!-- </vue-seamless-scroll> -->
    </div>

    <RepairViewList
      :filters="filters"
      :sub_title="sub_title"
      v-model="dialog_visible"
    />
  </div>
</template>

<script>
import { getColumns } from "../../../generate";
import { calcTimeDiffFormatter } from "../../../utils";
import RepairViewList from "./RepairViewList.vue";

export default {
  name: "box9_1",
  components: {
    RepairViewList,
  },
  data: function () {
    return {
      flag: 2,
      kvs: [
        {
          flag: 0,
          text: "昨日量",
        },
        {
          flag: 1,
          text: "7日量",
        },
        {
          flag: 2,
          text: "30日量",
        },
      ],
      dialog_visible: false,
      sub_title: null,
      filters: [],
      list: [],
    };
  },
  watch: {
    flag: {
      handler: "initCharts",
      immediate: true,
    },
  },
  myChart: null,
  async mounted() {
    // this.initItemSpan();
    this.columns = await getColumns("RepairViewListModel");
  },
  methods: {
    calcTimeDiffFormatter,
    initItemSpan() {
      if (!this.$refs.RepairName) {
        return setTimeout(() => {
          this.initItemSpan();
        }, 300);
      }
      const RepairNameList = this.$refs.RepairName;
      const UseHourseTextList = this.$refs.UseHourseText;
      let RepairNameMax = 0,
        UseHourseTextMax = 0;
      RepairNameList.forEach(
        (i) =>
          (RepairNameMax =
            i.offsetWidth > RepairNameMax ? i.offsetWidth : RepairNameMax)
      );
      UseHourseTextList.forEach(
        (i) =>
          (UseHourseTextMax =
            i.offsetWidth > UseHourseTextMax ? i.offsetWidth : UseHourseTextMax)
      );
      RepairNameList.forEach(
        (i) =>
          (i.style = `width:${RepairNameMax}px;flex:0 0 ${RepairNameMax}px;`)
      );
      UseHourseTextList.forEach(
        (i) =>
          (i.style = `width:${UseHourseTextMax}px;flex:0 0 ${UseHourseTextMax}px;`)
      );
      this.$refs.seamless.reset();
    },
    async initCharts() {
      const data = await this.$http.get(
        `/api/RepairReport/RepairLargeScreenModelCList?flag=${this.flag}`
      );
      this.list = data;
    },
    openItem(v) {
      this.filters = [
        {
          Name: "ApplyTime",
          compare: ">=",
          value: v.Ds,
        },
        {
          Name: "ApplyTime",
          compare: "<",
          value: v.De,
        },
        {
          Name: "Repair_Id",
          compare: "==",
          value: v.Id,
        },
      ];
      this.sub_title = `日期起:${v.Ds.substring(0, 10)} 日期止:${v.De.substring(
        0,
        10
      )} 维修工程师:${v.Name}`;
      this.dialog_visible = true;
    },
    handleClick(e) {
      this.openItem(JSON.parse(e.path[1].dataset.obj));
    },
  },
  computed: {
    seamlessScrollOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>

<style scoped>
.item {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  flex: 1;
  padding-right: 5px;
  color: #fff;
}

.col1,
.col2,
.col3 {
  flex: 1;
}
</style>